<script setup>

</script>

<template>
  <div class="app">
    <div class="title">
      <h2>基础信息</h2>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" inline>
        <el-form-item label="地址类型">
          <el-select v-model="form.addressType" placeholder="请选择" clearable>
            <el-option label="发货地址" value="1"></el-option>
            <el-option label="收货地址" value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="客户">
          <el-select v-model="form.customerName" placeholder="请选择" clearable>
            <el-option label="七尾云科技有限公司" value="七尾云科技有限公司"></el-option>
            <el-option label="石矿公司" value="石矿公司"></el-option>
            <el-option label="三只羊集团" value="三只羊集团"></el-option>
            <el-option label="七个人" value="七个人"></el-option>
            <el-option label="无忧传媒" value="无忧传媒"></el-option>
            <el-option label="河南物流有限公司" value="河南物流有限公司"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="联系人" prop="contactPerson">
          <el-input v-model="form.contactPerson" placeholder="请输入联系人"/>
        </el-form-item>

        <el-form-item label="联系电话" prop="phoneNumber">
          <el-input v-model="form.phoneNumber" placeholder="请输入联系电话"/>
        </el-form-item>

        <el-form-item label="邮编" prop="postalCode">
          <el-input v-model="form.postalCode" placeholder="请输入邮编"/>
        </el-form-item>

        <el-form-item label="区域" prop="region">
          <!--          <el-cascader-->
          <!--            v-model="value1"-->
          <!--            :options="options1"-->
          <!--            @change="handleChange" clearable>-->
          <!--          </el-cascader>-->
          <el-select v-model="form.region" placeholder="请选择" clearable>
            <el-option label="四川省" value="四川省"></el-option>
            <el-option label="广东省" value="广东省"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="详细地址" prop="detailedAddress">
          <el-input v-model="form.detailedAddress" placeholder="请输入详细地址"/>
        </el-form-item>

        <el-form-item label="备注信息" prop="bei">
          <el-input v-model="form.bei" placeholder="请输入备注信息"/>
        </el-form-item>

        <div class="bao">
          <el-button type="primary" @click="submitForm">保 存</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>

      </el-form>
    </div>
  </div>
</template>

<style>
.title {
  margin-left: 50px;
}

.bao {
  text-align: right;
  padding: 100px;
}
</style>

<script>
import {
  addAddressmanagement,
  getAddressmanagement,
  updateAddressmanagement
} from "@/api/addressmanagement/addressmanagement";

export default {
  data() {
    return {
      form: {},
    }
  },

  created() {
    console.log(this.$route.query.id + "....." + (this.$route.query.id !== undefined))
    if (this.$route.query.id !== undefined) {
      this.findCustomer();
    }
  },

  methods: {
    //修改回显
    findCustomer() {
      var id = this.$route.query.id;
      getAddressmanagement(id).then(response => {
        this.form = response.data;
      });
    },

    /** 保存按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateAddressmanagement(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              // this.open = false;
              // this.getList();
              this.$router.push({path: '/addressmanagementindex'});
            });
          } else {
            addAddressmanagement(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              // this.open = false;
              // this.getList();
              this.$router.push({path: '/addressmanagementindex'});
            });
          }
        }
      });
    },

    cancel() {
      this.$router.push({path: '/addressmanagementindex'})
    }

  }

}

</script>
